<template>
	<view>
		<!-- <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta> -->
		<uni-popup ref="popup" :is-mask-click="false" @change="change">
			<view class="bg">

				<!-- 拼图背景图 -->
				<view class="puzzle-bg">
					<image class="image" src="/static/verify.png"></image>
					<!-- 拼图缺口 -->
					<view class="puzzle-gap" :style="{ left: puzzlePosition + 'px', top: '50px' }"></view>
				</view>

				<!-- 滑块控制 -->
				<view class="slider-control">
					<view class="slider-track">
						<view class="slider-button" :style="{ left: sliderPosition + 'px' }" @mousedown="startDrag"
							@touchstart="startDrag" @mousemove="handleDrag" @touchmove="handleDrag" @mouseup="stopDrag"
							@touchend="stopDrag" @mouseleave="stopDrag">
							→
						</view>
					</view>

					<view class="slider-text">
						{{ isVerified ? '验证成功' : '拖动滑块完成拼图' }}
					</view>
				</view>

				<!-- 拼图块 -->
				<view class="puzzle-piece"
					:style="{ left: puzzlePiecePosition + 'px', top: '50px', opacity: isDragging ? 1 : 0.8 }"
					v-show="!isVerified">
				</view>

				<!-- 验证结果提示 -->
				<view v-if="showResult" class="result-tip" :class="{ success: isVerified, error: !isVerified }">
					{{ isVerified ? '✓ 验证成功' : '✗ 验证失败，请重试' }}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "popVerify",
		emits: ['success'],
		data() {
			return {
				show: false,
				puzzlePosition: 0, // 拼图缺口位置
				sliderPosition: 0, // 滑块位置
				puzzlePiecePosition: 0, // 拼图块位置
				isDragging: false, // 是否正在拖动
				isVerified: false, // 是否验证成功
				showResult: false, // 是否显示结果
				startX: 0, // 拖动起始位置
				startLeft: 0 // 滑块初始位置
			};
		},
		created() {
			this.initVerify()
		},
		methods: {
			open() {
				this.$refs.popup.open("center")
			},
			close() {
				let that = this
				setTimeout(()=>{
					that.$refs.popup.close()
					that.$emit('success')
					that.initVerify()
				},500)
			},
			change(e) {
				this.show = e.show
			},
			// 开始拖动
			startDrag(e) {
				this.isDragging = true
				this.startX = e.clientX || e.touches[0].clientX
				this.startLeft = this.sliderPosition
			},
			// 停止拖动
			stopDrag() {
				if (!this.isDragging) return

				this.isDragging = false
				this.verifyPosition()
			},
			// 初始化验证
			initVerify() {
				const trackWidth = 300 // 轨道总宽度
				const buttonWidth = 40 // 滑块按钮宽度
				const minPosition = 20 // 最小位置（避免太靠边）
				const maxPosition = trackWidth - buttonWidth - 20 // 最大位置

				// 随机生成拼图位置（在有效范围内）
				this.puzzlePosition = Math.floor(Math.random() * (maxPosition - minPosition)) + minPosition
				this.sliderPosition = 0
				this.puzzlePiecePosition = 0
				this.isVerified = false
				this.showResult = false
				this.isDragging = false
			},
			// 处理拖动
			handleDrag(e) {
				if (!this.isDragging) return

				e.preventDefault()
				const currentX = e.clientX || e.touches[0].clientX
				const moveX = currentX - this.startX
				const trackWidth = 300 // 轨道总宽度
				const buttonWidth = 40 // 滑块按钮宽度

				// 计算新的滑块位置（限制在有效范围内）
				let newPosition = this.startLeft + moveX
				newPosition = Math.max(0, Math.min(newPosition, trackWidth - buttonWidth))

				this.sliderPosition = newPosition
				this.puzzlePiecePosition = newPosition
			},

			// 验证位置
			verifyPosition() {
				// 允许的误差范围
				const tolerance = 5
				const diff = Math.abs(this.sliderPosition - this.puzzlePosition)

				this.isVerified = diff <= tolerance
				this.showResult = true

				if (this.isVerified) {
					// 验证成功，拼图块归位
					this.puzzlePiecePosition = this.puzzlePosition
					this.close()
				} else {
					// 验证失败，滑块回弹
					setTimeout(() => {
						this.sliderPosition = 0
						this.puzzlePiecePosition = 0
						this.showResult = false
					}, 1000)
				}
			},
		}
	}
</script>

<style>
	@import "popVerify2.css"
</style>